<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video id="video" autoplay="autoplay" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill" width="100%"></video>
<script type="text/javascript">
    getMedia()
    function getMedia() {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
        var exArray = [];
        if(navigator.getUserMedia) {
                var medias = {
                    audio: false,
                    video: {
                        facingMode: {
                            exact: "environment"
                            //exact:'user'
                        }
                    }
                }

                navigator.getUserMedia(medias, successCallback, errorCallback);


        } else {
            alert('Native device meadia streaming(getUserMdeia) not supported in this browser.')
        }
    }

    function successCallback(stream) {
        var video = document.getElementById("video");
        video.srcObject = stream;
    };

    function errorCallback(err) {
        alert(err);
    };

</script>
</body>
</html>